<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>用户详情</title>
    <link rel="stylesheet" type="text/css" th:href="@{/js/layui/css/layui.css}" media="all">
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-container">
                <div class="layui-row layui-col-space10" >
                    <div class="layui-col-md2">
                        <img th:src="${user.avatar}" width="60" height="60">
                    </div>
                    <div class="layui-col-md8" style="font-size: 16px">
                        <div>
                            <span th:text="${user.nick}"></span>
                        </div>
                        <div style="margin-top: 10px">
                            <span style="padding-right: 10px" id="loginCountId"><i class="layui-icon-cellphone-fine"></i>1次登录</span>
                            <a style="padding-right: 10px" onclick="showFriends();" id="friendCountId"></a>
                            <a onclick="showGroups();" id="groupCountId"></a>
                        </div>
                    </div>
                    <div class="layui-col-md2">
                        <button class="layui-btn layui-btn-normal" onclick="showChatDetails();">监控视角</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-container">
                <div class="layui-row layui-col-space20">
                    <div class="layui-col-md6">
                        UID: <span th:text="${user.id}"></span>
                    </div>
                    <div class="layui-col-md6" th:if="${!#strings.isEmpty (user.userIp)}">
                        IP: <span th:text="${user.userIp}"></span>
                    </div>
                    <div class="layui-col-md6">
                        账号: <span th:text="${user.mobile}"></span>
                    </div>
                    <div class="layui-col-md6" th:if="${!#strings.isEmpty (user.ipArea)}">
                        注册地: <span th:text="${user.ipArea}"></span>
                    </div>
                    <div class="layui-col-md6" th:if="${!#strings.isEmpty (user.gender)}">
                        性别: <span th:text="${user.gender}"></span>
                    </div>
                    <div class="layui-col-md6">
                        注册时间: <span th:text="${#dates.format (user.ctime, 'yyyy-MM-dd HH:mm:ss')}"></span>
                    </div>
                    <div class="layui-col-md6">
                        手机: <span th:text="${user.mobile}"></span>
                    </div>
                    <div class="layui-col-md6">
                        最近登录: <span th:text="${#dates.format (user.loginTime, 'yyyy-MM-dd HH:mm:ss')}"></span>
                    </div>
                    <div class="layui-col-md6">
                        状态: <span th:text="${user.status == 0 ? '正常' : '冻结'}"></span>
                    </div>
                    <div class="layui-col-md6">
                        备注: <span th:text="${user.remark}"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/js/layui/layui.js}"></script>
<script type="text/javascript" th:inline="javascript">
    var user = [[${user}]];
    layui.use(['table', 'form', 'laypage', 'layer', 'element'], function () {
        // 操作对象
        var form = layui.form
            , table = layui.table
            , layer = layui.layer
            , element = layui.element
            , $ = layui.jquery;

        // 先置空后赋值
        $("#friendCountId").html("");
        $("#groupCountId").html("");
        $("#loginCountId").html("");

        // 设置好友数量和群组数量 登录次数
        var groupCount = [[${groupCount}]];
        var friendCount = [[${friendCount}]];
        var loginCount = [[${loginCount}]];
        $("#loginCountId").html("<i class=\"layui-icon-user\"></i>"+loginCount+"次登录");
        $("#friendCountId").html("<i class=\"layui-icon-user\"></i>"+friendCount+"位好友");
        $("#groupCountId").html("<i class=\"layui-icon-dialogue\"></i>"+groupCount+"个群聊");

    });


    function showFriends() {
        layer.open({
            type: 2,
            title: '好友列表',
            shade: 0.2,
            shadeClose: true,
            maxmin: true, //开启最大化最小化按钮
            area: ['900px', '350px'],
            content: [[${basePath}]] + '/member/friend/index?id=' + user.id
        });
    }

    function showGroups() {
        layer.open({
            type: 2,
            title: '群组列表',
            shade: 0.2,
            shadeClose: true,
            maxmin: true, //开启最大化最小化按钮
            area: ['900px', '350px'],
            content: [[${basePath}]] + '/member/list/group?userId=' + user.id
        });
    }
    
    function showChatDetails() {
        layer.open({
            type: 2,
            title: user.nick + '的视角',
            shadeClose: true,
            shade: 0.2,
            // maxmin: true, //开启最大化最小化按钮
            area: ['1002px', '670px'],
            content: [[${basePath}]] + '/member/chatRecord/index?userId=' + user.id
        })
    }
</script>
</body>
</html>